<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" title="通过邮件找回密码" width="500px">
    <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="160px">
      <el-form-item label="账号" prop="busMainData.userAccount">
        <el-input v-model="form.busMainData.userAccount" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="新密码" prop="busMainData.password">
        <el-input v-model="form.busMainData.password" type="password" auto-complete="on" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="busMainData.confirmPassword">
        <el-input v-model="form.busMainData.confirmPassword" type="password" auto-complete="on" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="邮件" prop="busMainData.email">
        <el-input v-model="form.busMainData.email" style="width: 300px;">
          <el-button v-if="form.busMainData.email != ''" slot="append" :disabled="sendCodeDisabled" icon="el-icon-check" size="mini" title="点击发送验证码" @click="doSendCode()" />
        </el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="registerCode">
        <el-input v-model="form.registerCode" style="width: 120px;"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { userResetPassword, sendForgetPasswordCode } from '@/api/user'
import md5 from 'js-md5'
export default {
  components: { },
  props: {
  },
  data() {
    const confirmPass = (rule, value, callback) => {
      if (this.form.busMainData.password !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      dialog: false,
      style: 'width: 184px',
      timeout: null,
      sendCodeDisabled: false,
      form: {
        busMainData: {
          id: '',
          userAccount: '',
          password: '',
          confirmPassword: '',
          phone: '',
          email: ''
        }
      },
      rules: {
        'busMainData.userAccount': [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 50, message: '长度在 4 到 50 个字符', trigger: 'blur' }
        ],
        'busMainData.password': [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 50, message: '长度在 4 到 50 个字符', trigger: 'blur' }
        ],
        'busMainData.confirmPassword': [
          { required: true, validator: confirmPass, trigger: 'blur' }
        ],
        'busMainData.email': [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        'registerCode': [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    initDataOfBefore() {
    },
    doSendCode() {
      sendForgetPasswordCode({ 'email': this.form.busMainData.email }).then(res => {
        this.sendCodeDisabled = true
        setTimeout(() => {
          this.sendCodeDisabled = false
        }, 30000)
        this.$notify({
          title: '验证码',
          message: '发送成功,请查收邮件.',
          type: 'success',
          duration: 2500
        })
        this.loading = false
      }).catch(err => {
        this.sendCodeDisabled = false
        this.loading = false
        console.log(err)
      })
    },
    doSubmit() {
      // 增加校验密码是否相等
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.doAdd()
        }
      })
    },
    doAdd() {
      const userAccount = this.form.busMainData.userAccount.toLowerCase()
      const password = md5(this.form.busMainData.password + userAccount)
      const confirmPassword = md5(this.form.busMainData.confirmPassword + userAccount)
      const postData = JSON.parse(JSON.stringify(this.form))
      postData.busMainData.userAccount = userAccount
      postData.busMainData.password = password
      postData.busMainData.confirmPassword = confirmPassword
      postData.registerCode = this.form.registerCode
      userResetPassword(postData).then(res => {
        this.resetForm()
        this.$notify({
          title: '密码重置成功.',
          message: userAccount + '欢迎使用.',
          type: 'success',
          duration: 2500
        })
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>
